<template>
	<view>
		<!-- 选择车型 -->
		<u-popup v-model="showRight" mode="right">
			<scroll-view :scroll-top="0" scroll-y="true" :style="{ height: winHeight + 'px' }">
				<block v-for="(list, idx) in vehicle" :key="idx">
					<view class="vehicle-list-item">
						<view v-if="list.data && list.data.length" :id="list.letter" class="vehicle-list-item-title">{{ list.letter }}</view>
						<view v-if="list.data && list.data.length" class="uni-list">
							<view v-for="(item, index) in list.data" :key="index" class="vehicle-list-item-contect" hover-class="uni-list-item--hover" @click="chooseVehicle(item)">
								<view class="uni-list-item__content">{{ item.name }}</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</u-popup>
		<!-- 选择品牌 -->
		<u-index-list :scrollTop="scrollTop" :index-list="indexList">
			<view v-for="(item, index) in list" :key="index">
				<u-index-anchor :index="item.letter" />
				<!-- 第一个渲染宫格 -->
				<view v-if="index == 0" class="list-cell u-border-bottom">
					<u-grid :col="5">
						<u-grid-item v-for="(item, index1) in item.data" :key="index1" @click="chooseEvent(item)">
							<u-image width="80rpx" height="80rpx" :fade="false" :src="item.img" @click="chooseEvent(item)"></u-image>
							<view class="grid-text">{{ item.name }}</view>
						</u-grid-item>
					</u-grid>
				</view>
				<!-- 其它渲染列表 -->
				<view v-else class="list-cell u-border-bottom" v-for="(item, index2) in item.data" :key="index2" @click="chooseEvent(item)">
					<u-image width="60rpx" height="60rpx" :src="item.img" @click="chooseEvent(item)"></u-image>
					<text class="anchor-text">{{ item.name }}</text>
				</view>
			</view>
		</u-index-list>

		<u-modal v-model="show" :show-title="false" confirm-text="已阅" @confirm="confirm">
			<view class="slot-content"><rich-text style="white-space: pre-wrap;" :nodes="params.debug_txt"></rich-text></view>
		</u-modal>
	</view>
</template>

<script>
import { carBrands } from '@/common/data/allBrands.js';
export default {
	data() {
		return {
			showRight: false,
			scrollTop: 0,
			indexList: [],
			list: [],
			vehicle: [],
			select_path: {},
			winHeight: uni.getSystemInfoSync().windowHeight,
			params: [],
			show: false
		};
	},
	onLoad(option) {
		let _self = this;
		if (option.hasOwnProperty('params')) {
			_self.params = JSON.parse(option.params);
		}
	},
	onShow(option) {
		let _self = this;
		_self.chooseComplete();
	},
	onUnload() {
		let _self = this;
	},
	created() {
		let _self = this;
		let _obj = [];
		_obj.push({
			letter: 'HOT',
			data: []
		});
		//热门车型数据
		carBrands.HotBrand.filter(item => {
			var _data = item['Brand'].split(' - ');
			_obj[0].data.push({
				brand: item['Brand'],
				name: _data[1],
				img: item['ImageUrl'],
				md5: item['md5']
			});
			return (item.name = _data[0]);
		});
		//车型列表
		carBrands.Brand.filter(item => {
			var _data = item['Brand'].split(' - ');
			var _index = _obj.findIndex(_item => {
				return _item.letter == _data[0] ? true : false;
			});
			if (-1 == _index) {
				_obj.push({
					letter: _data[0],
					data: [
						{
							brand: item['Brand'],
							name: _data[1],
							img: item['ImageUrl'],
							md5: item['md5']
						}
					]
				});
			} else {
				_obj[_index].data.push({
					brand: item['Brand'],
					name: _data[1],
					img: item['ImageUrl'],
					md5: item['md5']
				});
			}
		});
		_self.list = _obj;
		_self.indexList = this.list.map(val => {
			return val.letter;
		});
	},
	onPageScroll(e) {
		let _self = this;
		_self.scrollTop = e.scrollTop;
	},
	methods: {
		//选择品牌
		chooseEvent(e) {
			let _self = this;
			_self.vehicle = _self.select_path = {};
			_self.select_path.computed = false;
			_self.select_path.brand_name = e.name;
			_self.select_path.brand_id = e.md5;
			let _obj = [];
			let url = e.md5 + '/Vehicle.js';
			_self.$u.get(url).then(res => {
				res.filter(item => {
					var _index = _obj.findIndex(_item => {
						return _item.letter == item['BrandType'];
					});

					if (-1 == _index) {
						_obj.push({
							letter: item['BrandType'],
							data: [
								{
									VehicleId: item['VehicleId'],
									name: item['CarName']
								}
							]
						});
					} else {
						_obj[_index].data.push({
							VehicleId: item['VehicleId'],
							name: item['CarName']
						});
					}
				});
				_self.vehicle = _obj;
			});
			_self.showRight = true;
		},
		//选择车辆
		chooseVehicle(e) {
			let _self = this;
			let url = '';
			uni.removeStorageSync('vehice_storage');
			url = _self.select_path.brand_id + '/' + e.VehicleId + '.js';
			_self.select_path.vehicle_id = e.VehicleId;
			_self.select_path.vehicle_name = e.name;
			_self.$u.get(url).then(res => {
				uni.setStorageSync('vehice_storage', res);
				_self.showRight = false;
				/*
					数据里包含最多三级数据 [排量,年份,款式]
					如果返回为数据长度为0则没有下级数据
					*/
				if (Object.keys(res).length == 0) {
					_self.params = _self.select_path;
					_self.chooseComplete();
					return;
				}
				uni.redirectTo({
					url: '/pages/cartBand/vechice?params=' + JSON.stringify(_self.select_path)
				});
			});
		},
		chooseComplete() {
			if (this.params.hasOwnProperty('brand_name')) {
				this.params.computed = true;
				this.show = true;
				this.params.debug_txt = JSON.stringify(this.params, null, 4);
				console.log(this.params);
			}
		},
		confirm() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: $u-content-color;
	font-size: 14px;
	line-height: 30px;
	background-color: #fff;
}

.anchor-text {
	margin-left: 20rpx;
}

.vehicle-list-item-title {
	min-width: 300rpx;
	padding: 24upx 30upx;
	line-height: 1.5;
	background-color: #f7f7f7;
	font-size: 32upx;
}

.vehicle-list-item-contect {
	font-size: 32upx;
	padding: 24upx 30upx;
	width: 100%;
	box-sizing: border-box;
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-data: center;
	border-bottom: 1rpx solid #eee;
}
</style>
